<!doctype html>
<html>
<head>
 <title>HTML5-now: meter element</title>
 <script src="../base2-legacy.js"></script><!-- support really old browsers -->
 <script src="../html5-now.js"></script>
 <script src="colorizer.js"></script>
 <link rel="stylesheet" type="text/css" href="examples.css">
</script>
</head>
<body>
 <h1>HTML5-now: <code>meter</code> element</h1>

 <p>A <code>meter</code> element with <code>max</code> and <code>value</code> attributes:</p>

 <div class="example">
  <meter value="50" max="100"></meter>
 </div>

 <p>This is the markup for the above example:</p>
 
<pre class="html">
&lt;meter value="50" max="100"&gt;&lt;/meter&gt;
</pre>

 <p>A <code>meter</code> element that parses its relative value from its text content:</p>

 <div class="example">
  <meter>75%</meter>
 </div>

 <p>This is the markup for the above example:</p>
 
<pre class="html">
&lt;meter&gt;75%&lt;/meter&gt;
</pre>

 <p>Change colours with CSS:</p>

 <div class="example">
  <style>
   .fruity {color: lime; background-color: orange;}
  </style>
  <meter class="fruity">75%</meter>
 </div>

 <p>This is the markup for the above example:</p>

<pre class="html">
&lt;style&gt;
 .fruity {color: lime; background-color: orange;}
&lt;/style&gt;
&lt;meter class="fruity"&gt;75%&lt;/meter&gt;
</pre>

 <p>A more complex example of a <code>meter</code> element that parses its text content:</p>

 <div class="example">
  <meter>9 out of 10 cats prefer it.</meter>
 </div>

 <p>This is the markup for the above example:</p>

<pre class="html">
&lt;meter&gt;9 out of 10 cats prefer it.&lt;/meter&gt;
</pre>

 <p>If the <code>meter</code> element is taller than it is wide then it is rendered vertically:</p>

 <div class="example">
  <meter style="width:1em;height:8em">75%</meter>
 </div>

 <p>This is the markup for the above example:</p>

<pre class="html">
&lt;meter style="width:1em;height:8em"&gt;75%&lt;/meter&gt;
</pre>

</body>
</html>
